<template>
  <view>
    <uni-swipe-action>
      <uni-swipe-action-item v-for="(v, i) in carList" :key="i" :right-options="options"
        @click="handleClickToDelete(v)">
        <my-goods :v="v">
          <template #pre-left>
            <radio :checked="v.goods_state" @click="handleChangeState(v)"></radio>
          </template>
          <template #count>
            <uni-number-box :value="v.goods_count" :min="1" @change="handleChangeCount($event, v)"></uni-number-box>
          </template>
        </my-goods>
      </uni-swipe-action-item>
    </uni-swipe-action>

    <view class="action-submit">
      <label class="radio">
        <radio :checked="isAllChecked" @click="handleClickAllChecked" /><text>全选</text>
      </label>
      <view class="right">
        <view class="price">{{totalPrice}}</view>
        <button>提交</button>
      </view>
    </view>
  </view>
</template>

<script>
  import Badge from '../../mixins/tabbar-badge.js'
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    mixins: [Badge],
    computed: {
      ...mapState('car', {
        carList: state => state.carList
      }),
      ...mapGetters('car', ['totalPrice', 'isAllChecked'])
    },
    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }]
      }
    },
    methods: {
      ...mapMutations('car', ['updateCarListState', 'updateCarListCount', 'deleteCarListItem',
      'updateCarItemAllState']),
      handleClickAllChecked() {
        this.updateCarItemAllState(!this.isAllChecked)
      },
      handleChangeState(v) {
        this.updateCarListState(v)
      },
      handleChangeCount(value, v) {
        const data = {
          goods_id: v.goods_id,
          goods_count: value
        }
        this.updateCarListCount(data)
      },
      handleClickToDelete(v) {
        uni.showModal({
          title: '警告',
          content: '确认要删除吗？',
          success: ({
            confirm
          }) => {
            if (confirm) {
              this.deleteCarListItem(v)
            }
          }
        })

      }
    }
  }
</script>

<style lang="scss">

</style>
